<template>
  <div style="position: sticky;z-index: 2;top: 10px;">
    <div class="sortActive" @click="changeSort">
      <i class="el-icon-sort" style="padding-left:5px;"></i>
      {{ sorterActive }}
    </div>
    <transition name="fadeDown">
      <div class="sortList" v-show="showSort">
        <div
          class="sorter"
          @click="alterSort(item)"
          v-for="(item, index) in value"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "sort",
  props: { value: { type: Array, required: true } },
  data() {
    return {
      showSort: false,
      sorterActive: this.value[0],
    };
  },
  methods: {
    changeSort() {
      this.showSort = true;
    },
    alterSort(value) {
      this.showSort = false;
      if (this.sorterActive != value) {
        this.sorterActive = value;
        this.$emit("an_alterSort");
        // console.log(this.sorterActive);
      }
    },
  },
};
</script>
<style>
div.sorter {
  background: #fff;
  text-align: center;
  padding: 12px 25px;
  font-size: 14px;
}
div.sorter:hover {
  background-color: #b3d8ff;
}
div.sortActive {
  padding-bottom: 10px;
  /* position: relative; */
  color: rgb(64, 158, 255);
  font-weight: 700;
  z-index: 2;
}
div.sortList {
  position: absolute;
  z-index: 2;
  top: 0;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
